.banner {
  position: relative;
  width:100%;
  height: 70vh;
  overflow: hidden;
  text-align: center;
  user-select: none;
}
ul.banner-group {
  position: absolute;
  left: 0%;
  width: 300%;
  height: 100%;
}
img.banner-background {
  width: 100%;
  filter: brightness(0.6);
}
.banner-group li {
  float: left;
  position: relative;
  width: calc(100% / 3);
  height:100%;
  list-style: none;
  color: #fff;
}
.banner h1 {
  padding: 5px;
  font-size: 72px;
  font-weight: 500;
}
.banner p {
  padding: 5px;
  font-size: 24px;
}
.banner .bar {
  margin: 5px 0 5px calc(50% - 60px);
  width: 120px;
  height: 3px;
  background-color: #fff;
  color: #fff;
}
.banner .text {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%,-70%);
}
img.mid-block, img.lean-block {
  position: absolute;
  z-index: 0;
}
li img.mid-block {
  position: absolute;
  left: calc(50% - 225px);
  top: 30%;
  z-index: 0;
  width: 450px;
}
.banner img.lean-block {
  position: absolute;
  left: calc(50% - 170px);
  top: 10%;
  z-index: 0;
  height:350px;
}
.banner .page-dot{
  position: absolute;
  bottom: 50px;
  z-index: 100;
  width: 250px;
  height:10px;
  margin-left: calc(50% - 125px);
  padding: 0 40px;
}
.banner .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 100;
  overflow: hidden;
  cursor: pointer;
  width: 10%;
  height: 100%;
}
.banner .left-arrow {
  left: 0;
  background: linear-gradient(to right, rgb(0,0,0,.3) ,rgb(0,0,0,0), rgb(0,0,0,0), rgb(0,0,0,0)) 100% 0;
  background-size: 200%;
  transition: background-position 0.5s;
}
.banner .left-arrow:hover {
  background-position: 0;
}
.banner .right-arrow {
  right: 0;
  background: linear-gradient(to right,rgb(0,0,0,0), rgb(0,0,0,0), rgb(0,0,0,0), rgb(0,0,0,.3)) 0;
  background-size: 200%;
  transition: background-position 0.5s;
}
.banner .right-arrow:hover {
  background-position: 100% 0;
}
.page-dot li {
  display: inline-block;
  margin: 0 7px;
  width: 10px;
  opacity: 0.5;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
  transition-property: width, opacity;
	transition-duration: 0.25s;
	transition-timing-function: linear;
}